<template>
  <div ref="imageWrapper">
    <a-row :gutter="24" style="margin: 0">
      <a-col :md="5" :sm="24" style="height: calc(100vh - 150px)">
        <a-card style="border-radius: 25px; height: 100%">
          <template slot="title">
            <span style="color: #2e4cba">分类选择</span>
          </template>
          <div class="dataCol-menu">
            <a-menu
              style="width: 96%; margin: 10px auto; border: 1px solid #d9d9d9"
              mode="vertical"
              :default-selected-keys="['all']"
              @click="handleClick"
            >
              <a-menu-item key="all"> 全部 </a-menu-item>
              <a-menu-item v-for="report in reportList" :key="report.id">{{ report.name }}</a-menu-item>
            </a-menu>
          </div>
        </a-card>
      </a-col>
      <a-col :md="19" :sm="24" style="height: calc(100vh - 150px)">
        <a-card style="border-radius: 25px; height: 100%" >
          <template slot="title">
            <a-input-search
              v-model="queryParam.tableName"
              placeholder="请输入关键字搜索"
              style="width: 400px"
              enter-button
              @search="onSearch"
            />
          </template>
          <a-spin size="large" class="card-item-loding" :spinning="loading" v-show="loading"/>
          <div v-show="!loading" class="card-item-content">
            <BaseDatilebox v-for="(item,index) in dataSource" :key="index" :itemData="item"  @DataCheck="handleDataCheck"/>
          </div>
          <div class="card--item-footer">
            <a-pagination
              class="item-pagination"
              :page-size="15"
              :total="total"
              :item-render="itemRender"
              @change="handleChange"
            />
          </div>
        </a-card>
      </a-col>
    </a-row>
    <DataDetialModal ref="modalForm" />
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import BaseDatilebox from './BaseDatilebox'
import DataDetialModal from './DataDetial/DataDetialModal'
export default {
  components: { BaseDatilebox, DataDetialModal },
  data() {
    return {
      isactive: true,
      dataSource: [],
      reportList: [],
      queryParam: {
        reportCategoryId: 'all',
        tableName: '',
        current: 1,
        pageSize: 15,
      },
      total: 0,
      loading: false,
      url: {
        reportList: '/sjtb/dataCollectionReportCategory/list',
        detailBox: '/sjcj/dataCollection/queryTableList',
      },
    }
  },
  mounted() {
    // 生成左侧菜单
    this.getReportList()
    this.getDetailBox(1)
  },
  methods: {
    onSearch() {
      this.getDetailBox(1)
    },
    handleDataCheck(record){
        this.$refs.modalForm.edit(Object.assign(record,{reportCategoryId:this.queryParam.reportCategoryId}))
    },
    handleClick({ item, key, keyPath }) {
      console.log('');
      this.queryParam.tableName = ''
      this.queryParam.reportCategoryId = key
      this.getDetailBox(1)
    },
    itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <a class="prev-page">上一页</a>
      } else if (type === 'next') {
        return <a class="next-page">下一页</a>
      }
      return originalElement
    },
    getDetailBox(arg) {
      this.loading = true
      if (arg) {
        this.queryParam.current = 1
      }
      getAction(this.url.detailBox, this.queryParam).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.total = res.result.total
        } else {
          console.log(res)
        }
        this.loading = false
      })
    },
    getReportList() {
      getAction(this.url.reportList).then((res) => {
        if (res.success && res.result.length > 0) {
          this.reportList = res.result
        } else {
          console.log(res)
        }
      })
    },
    handleChange(page, pageSize) {
      this.queryParam.current = page
      this.getDetailBox()
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
  padding: 0px 20px;
  position: relative;
  height: calc(100vh - 220px);
  .card-item-loding{
     position: absolute;
     top: 45%;
     left: 48%;
  }
}
/deep/ .ant-input-group {
  /deep/ .ant-input-group-addon {
    /deep/ .ant-btn-primary {
      background-color: #fff;
      border-color: #fff;
    }
  }
}
.dataCol-menu {
  height: 630px;
  /deep/ .ant-menu-item {
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid #d9d9d9;
  }
  /deep/ .ant-menu-item-selected {
    color: #ef9325;
    background-color: #fff !important;
    box-shadow: 0px 0px 5px #ef9325;
  }
}

.card-item-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  //   justify-content: space-around;
  flex-wrap: wrap;
}
.card--item-footer {
  position: absolute;
  bottom: 5px;
  right: 28px;
  width: 100%;
  text-align: right;
  .item-pagination {
    margin: 0px 12px 12px 0px;
  }
  .prev-page,
  .next-page {
    display: inline-block;
    border: 1px solid #d9d9d9;
    height: 32px;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    padding: 0px 6px;
  }
}
</style>